<template>
  <template v-if="labelsList.length">
    <a-space v-if="showNum > labelsList.length && !edit" :size="5" wrap>
      <div class="label-w" v-for="(label, k) in labelsList.slice(0, showNum)" :key="k" :style="`background-color:${label.labelColor};font-size:${size}px`">{{ label.labelName }}</div>
    </a-space>
    <a-popover position="bottom" v-else>
      <template #content>
        <a-space :size="5" wrap style="width: 240px">
          <div class="label-w" v-for="(label, k) in labelsList" :key="k" :style="`background-color:${label.labelColor};font-size:${size}px`">{{ label.labelName }}</div>
          <a-button v-if="edit && labelAuth" size="mini" @click="showSetLabel = true">
            <icon-plus />
          </a-button>
        </a-space>
      </template>
      <a-space :size="5" wrap>
        <div class="label-w" v-for="(label, k) in labelsList.slice(0, showNum)" :key="k" :style="`background-color:${label.labelColor};font-size:${size}px`">{{ label.labelName }}</div>
      </a-space>
    </a-popover>
  </template>
  <!-- 设置标签 -->
  <SetPurchaseLabel v-if="showSetLabel" :source="source" :isShow="showSetLabel" :list="[billInfo]" @closed="showSetLabel = false" @success="emit('success')" />
</template>

<script lang="ts" setup>
  import { parseJson } from '@/utils'
  import { ref } from 'vue'
  import SetPurchaseLabel from './setPurchaseLabel.vue'
  const emit = defineEmits(['success'])
  const props = defineProps({
    labels: {
      type: String,
    },
    edit: {
      type: Boolean,
      default: false,
    },
    billInfo: {
      type: Object,
      default: () => {},
    },
    showNum: {
      type: Number,
      default: 2,
    },
    size: {
      type: Number,
      default: 12,
    },
    source: {
      type: String,
      default: 'application',
    },
    labelAuth: {
      type: Boolean,
    },
  })
  const labelsList = ref<Array<any>>([])
  const showSetLabel = ref(false)
  function setLabels() {
    labelsList.value = props.labels ? parseJson(props.labels, []) : []
  }
  setLabels()
</script>

<style lang="less" scoped>
  .label-w {
    color: #fff;
    background-color: #eee;
    padding: 4px 8px;
    border-radius: 20px;
    line-height: 1;
    flex-shrink: 0;
    margin-bottom: 5px !important;
  }
</style>
